<template>
	<view :class="themeName">
		<view class="leader-box" :style="{
			'width': `calc(100% - ${$px2rpx(20)}rpx)`,
			'margin': `${$px2rpx(10)}rpx`,
		}">
			<view class="leader-form m-b-20">
				<view class="apply-title m-b-20">{{$zhTran('团长信息')}}</view>
				<u-form :model="formModel" ref="uForm" :error-type="['toast']">
					<u-form-item :label-width="140" :label="$zhTran('团长名称')" required prop="name">
						<u-input v-model="formModel.name" :placeholder="$zhTran('请填写团长名称')" type="text" />
					</u-form-item>
					<u-form-item :label-width="140" :label="$zhTran('联系电话')" required prop="phone">
						<u-input v-model="formModel.phone" :placeholder="$zhTran('请填写联系电话')" type="text" />
					</u-form-item>
					<u-form-item :label-width="140" :label="$zhTran('所在小区')">
						<u-input v-model="formModel.community" :placeholder="$zhTran('请填写所在小区')" type="text" />
					</u-form-item>
					<u-form-item :label-width="140" :label="$zhTran('所在地区')" required prop="region">
						<view class="flex flex-1 row-between m-l-10" style="width: 100%;" @click="showRegion = true">
							<input name="region" v-model="formModel.region" disabled type="text"
								:placeholder="$zhTran('请选择省、市、区')"></input>
							<u-icon color="#707070" name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<u-form-item :label-width="140" :label="$zhTran('提货地址')" required prop="address">
						<u-input v-model="formModel.address" :placeholder="$zhTran('请填写详细地址')" type="text" />
					</u-form-item>
				</u-form>
				<view class="m-b-20"></view>
			</view>
			<button class="apply-btn" @click="submit">{{$zhTran('保存')}}</button>
		</view>
		<u-picker v-model="showRegion" :confirm-color="themeColor" cancel-color="#999" mode="region"
			:defaultRegion="formModel.regionArr" @confirm="regionChange">
		</u-picker>
	</view>
</template>

<script type=" text/javascript">
	import {
		apiCommunityGroupPurchaseLeaderDetail,
		apiUpdateCommunityGroupPurchaseLeaderInfo
	} from "@/api/community_group_purchase"
	export default {
		props: {},
		data() {
			return {
				formModel: {
					regionArr: [],
					region: ''
				},
				showRegion: false, //显示地区选择的flag
				rules: {
					name: [{
						required: true,
						message: this.$zhTran('请填写团长姓名'),
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						type: 'number',
						message: this.$zhTran('请填写联系电话'),
						trigger: ['change', 'blur'],
					}],
					region: [{
						required: true,
						message: this.$zhTran('请选择所在地区'),
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: this.$zhTran('请填写提货详细地址'),
						trigger: ['change', 'blur'],
					}]
				},
			}
		},
		methods: {
			// 地区选择，选择当前省市区的ID
			regionChange(region) {
				console.log(region)
				const {
					city,
					province,
					area
				} = this.$zhTran(region)
				this.formModel.province_id = province.value;
				this.formModel.city_id = city.value;
				this.formModel.district_id = area.value;
				this.formModel.regionArr = [province.label, city.label, area.label]
				this.formModel.region = province.label + " " + city.label + " " + area.label
			},
			submit() {

				this.$refs.uForm.validate(valid => {
					if (valid) {
						apiUpdateCommunityGroupPurchaseLeaderInfo(this.formModel).then((res) => {
							this.$toast({
								title: this.$zhTran('保存成功'),
							})
							setTimeout(() => {
								this.$Router.back();
							}, 1.2 * 1000);
						}).catch(err => {})
					} else {
						console.log('验证失败');
					}
				});
			}

		},
		computed: {},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			apiCommunityGroupPurchaseLeaderDetail().then((res) => {
				this.formModel = this.$zhTran(res)
				this.formModel.regionArr = res.region.split(' ')
				this.$refs.uForm.setRules(this.rules);
			}).catch(err => {})
		},
	};
</script>

<style lang="scss" scoped>
	.leader-box {
		position: relative;

		.leader-form {
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 10rpx;
			padding: 40rpx;

			.apply-title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.apply-btn {
			background-color: rgba(255, 208, 0, 1);
			font-size: 26rpx;
		}
	}
</style>